<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容详情 - 图文视频社交App</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="components.css">
    <style>
        .comment-item {
            padding: 12px 16px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-content {
            margin-left: 12px;
            flex: 1;
        }
        
        .comment-username {
            font-weight: 600;
            font-size: 14px;
            color: #333;
        }
        
        .comment-text {
            font-size: 14px;
            color: #666;
            margin-top: 4px;
        }
        
        .comment-time {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
        
        .comment-actions {
            display: flex;
            align-items: center;
            margin-top: 4px;
        }
        
        .comment-like {
            font-size: 12px;
            color: #999;
            margin-right: 16px;
        }
        
        .comment-reply {
            font-size: 12px;
            color: #999;
        }
        
        .related-content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            padding: 16px;
        }
        
        .related-item {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .related-item img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
        }
        
        .related-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
            padding: 8px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <div class="status-bar-time">14:30</div>
        <div class="status-bar-icons">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>

    <!-- 顶部导航 -->
    <div class="flex justify-between items-center px-4 py-2 bg-white">
        <div class="flex items-center">
            <i class="fas fa-arrow-left text-gray-600 mr-3 text-xl"></i>
            <div class="text-lg font-medium">内容详情</div>
        </div>
        <div class="flex">
            <i class="fas fa-ellipsis-h text-gray-600 text-xl"></i>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-container">
        <!-- 内容卡片 -->
        <div class="content-card mx-0 rounded-none">
            <div class="card-header">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" alt="用户头像" class="avatar">
                <div>
                    <div class="username">旅行摄影师</div>
                    <div class="post-time">昨天</div>
                </div>
                <button class="ml-auto primary-button text-xs py-1 px-3">关注</button>
            </div>
            <div class="card-content">
                <div class="content-title">日本京都的樱花季</div>
                <div class="content-text">春天的京都，樱花盛开，美不胜收。分享一组我在京都拍摄的樱花照片，希望大家喜欢！#旅行 #日本 #樱花 #摄影</div>
                <div class="grid grid-cols-2 gap-2 mb-3">
                    <img src="https://images.unsplash.com/photo-1522383225653-ed111181a951" alt="樱花照片1" class="rounded-lg w-full h-40 object-cover">
                    <img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e" alt="樱花照片2" class="rounded-lg w-full h-40 object-cover">
                    <img src="https://images.unsplash.com/photo-1504198453319-5ce911bafcde" alt="樱花照片3" class="rounded-lg w-full h-40 object-cover">
                    <img src="https://images.unsplash.com/photo-1513407030348-c983a97b98d8" alt="樱花照片4" class="rounded-lg w-full h-40 object-cover">
                </div>
            </div>
            <div class="card-footer">
                <div class="action-button like-button">
                    <i class="far fa-heart action-icon"></i>
                    <span>3.5k</span>
                </div>
                <div class="action-button">
                    <i class="far fa-comment action-icon"></i>
                    <span>512</span>
                </div>
                <div class="action-button">
                    <i class="far fa-bookmark action-icon"></i>
                    <span>收藏</span>
                </div>
                <div class="action-button">
                    <i class="far fa-share-square action-icon"></i>
                    <span>分享</span>
                </div>
            </div>
        </div>

        <div class="divider"></div>

        <!-- 评论区 -->
        <div class="bg-white">
            <div class="section-title">评论 (512)</div>
            
            <!-- 评论项1 -->
            <div class="comment-item">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb" alt="评论用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-username">阳光生活家</div>
                        <div class="comment-text">太美了！请问是什么时候去的京都？我也想去看樱花！</div>
                        <div class="comment-time">2小时前</div>
                        <div class="comment-actions">
                            <div class="comment-like">
                                <i class="far fa-heart mr-1"></i>
                                <span>45</span>
                            </div>
                            <div class="comment-reply">
                                <i class="far fa-comment mr-1"></i>
                                <span>回复</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论项2 -->
            <div class="comment-item">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6" alt="评论用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-username">数码科技</div>
                        <div class="comment-text">照片拍得真好，请问用的什么相机？</div>
                        <div class="comment-time">5小时前</div>
                        <div class="comment-actions">
                            <div class="comment-like">
                                <i class="far fa-heart mr-1"></i>
                                <span>23</span>
                            </div>
                            <div class="comment-reply">
                                <i class="far fa-comment mr-1"></i>
                                <span>回复</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论项3 -->
            <div class="comment-item">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" alt="评论用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-username">美食达人</div>
                        <div class="comment-text">京都的樱花季真的很美，我去年也去了，还品尝了当地的美食，超级推荐！</div>
                        <div class="comment-time">昨天</div>
                        <div class="comment-actions">
                            <div class="comment-like">
                                <i class="far fa-heart mr-1"></i>
                                <span>67</span>
                            </div>
                            <div class="comment-reply">
                                <i class="far fa-comment mr-1"></i>
                                <span>回复</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 查看更多评论 -->
            <div class="text-center py-3 text-pink-600 font-medium">
                查看更多评论
            </div>
        </div>

        <div class="divider"></div>

        <!-- 相关推荐 -->
        <div class="bg-white">
            <div class="section-title">相关推荐</div>
            <div class="related-content">
                <div class="related-item">
                    <img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e" alt="相关内容">
                    <div class="related-title">日本东京旅行攻略</div>
                </div>
                <div class="related-item">
                    <img src="https://images.unsplash.com/photo-1504198453319-5ce911bafcde" alt="相关内容">
                    <div class="related-title">春季赏花最佳地点</div>
                </div>
                <div class="related-item">
                    <img src="https://images.unsplash.com/photo-1513407030348-c983a97b98d8" alt="相关内容">
                    <div class="related-title">摄影技巧分享</div>
                </div>
                <div class="related-item">
                    <img src="https://images.unsplash.com/photo-1522383225653-ed111181a951" alt="相关内容">
                    <div class="related-title">京都旅游必去景点</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论输入框 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-2 flex items-center">
        <input type="text" placeholder="说点什么..." class="flex-1 bg-gray-100 rounded-full py-2 px-4 mr-2">
        <button class="bg-pink-600 text-white rounded-full w-10 h-10 flex items-center justify-center">
            <i class="fas fa-paper-plane"></i>
        </button>
    </div>

    <script src="app.js"></script>
</body>
</html> 